<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>
<body>


    <div class="am-g am-g-fixed blog-fixed index-page"  >
<!--        <h1 align="center">欢迎进入个人网站首页</h1>-->
<!--        <h2 align="center">游客您好，如果想查看博客<a th:href="@{/login}">请登录</a></h2>-->
<!--    </div>-->

<!--    <div class="am-g am-g-fixed blog-fixed index-page" sec:authorize="isAuthenticated()">-->
        <div class="am-u-md-8 am-u-sm-12">
            <!-- 文章遍历并分页展示 -->
            <div th:each="article: ${articles.list}">
                <article class="am-g blog-entry-article">
                    <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                        <img width="100%" class="am-u-sm-12" th:src="@{${commons.show_thumb(article)}}"/>
                    </div>
                    <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                        <!-- 文章分类 -->
                        <span class="blog-color" style="font-size: 15px;"><a>默认分类</a></span>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <!-- 发布时间 -->
                        <span style="font-size: 15px;" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"/>
                        <h2>
                            <div><a style="color: #0f9ae0;font-size: 20px;" th:href="${commons.permalink(article.id)}"
                                    th:text="${article.title}"/>
                            </div>
                        </h2>
                        <!-- 文章摘要-->
                        <div style="font-size: 16px;" th:utext="${commons.intro(article,75)}"/>
                    </div>
                </article>
            </div>
            <!-- 文章分页信息 -->
            <div class="am-pagination">
                <div th:replace="/comm/paging::pageNav(${articles},'上一页','下一页','page')"/>
            </div>
        </div>
        <!-- 博主信息描述 -->
        <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>CrazyStone</span></h2>
                <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
                <p>
                    悦读
                </p>
                <p>让我们一起营造一个良好的阅读环境</p>
            </div>
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
                <p>
                    <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                    <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
                </p>
            </div>
        </div>
        <!-- 阅读排行榜 -->
        <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
                <div style="text-align: left">
                    <th:block th:each="article :${articleList}">
                        <a style="font-size: 15px;" th:href="@{'/article/'+${article.id}}"
                           th:text="${articleStat.index+1}+'、'+${article.title}+'('+${article.hits}+')'">
                        </a>
                        <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem"/>
                    </th:block>
                </div>
            </div>
        </div>
    </div>


</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
</html>
